import React, { useRef  } from 'react';
import { Editor } from '@tinymce/tinymce-react';
import {Button ,message } from 'antd'

interface Props {}

function Edito(props:Props) { 

    const [messageApi, contextHolder] = message.useMessage();

    // let editorRef = useRef<typeof Editor>(null);
    let editorRef:any = null

    const log = () => {
        if (editorRef) {
            //通过Editor组件实例，获取Editor组件的内容
            messageApi.open({
                type: 'success',
                content: editorRef.getContent(),
            });
        }
    };


    return (
        <div className='editor'>
            <Editor
                apiKey='4ml4h2usnw0c2mu6dy8u43b6k4v5eroxjzta91vikoczsm3m'
                //editorRef = editor 保存Editor组件的实例
                onInit={(evt, editor) => editorRef = editor}
                initialValue="<p>This is the initial content of the editor.</p>"
                init={{
                height: 700,
                menubar: false,
                plugins: [
                    'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
                    'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
                    'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
                ],
                toolbar: 'undo redo | blocks | ' +
                    'bold italic forecolor | alignleft aligncenter ' +
                    'alignright alignjustify | bullist numlist outdent indent | ' +
                    'removeformat | help',
                content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
                }}
            />
            <div className="box">
                {contextHolder}
                <Button type='primary' style={{marginTop:10}}  onClick={log}>保存</Button>
            </div>
        </div>
    );
}

export default Edito;